<template lang="">
    <div>
        <div style="background: #F5F7FB;">
           <div class="top-bg"></div>
           <div class="top">
                <div class="top-img">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/head.png" class="img" />
                    <div class="top-name">翟枫君</div>
                    <div class="qy">已签约</div>
                </div>
                <div class="top-btns">
                    <div class="top-btn">健康档案</div>
                    <div class="top-btn">健康记录</div>
                    <div class="top-btn">签约信息</div>
                    <div class="top-btn">服务记录</div>
                </div>
           </div>
            <div style="margin-top:2vh">
                <div class="title">个人信息</div>
                <div class="item">
                    <div class="item-left">身份证号</div>    
                    <div class="item-right">334526489542563345</div>
                </div>
                <div class="item">
                    <div class="item-left">性别</div>    
                    <div class="item-right">女</div>
                </div>
                <div class="item">
                    <div class="item-left">年龄</div>    
                    <div class="item-right">26</div>
                </div>
                <div class="item">
                    <div class="item-left">联系电话</div>    
                    <div class="item-right">13800138000</div>
                </div>
                <div class="item">
                    <div class="item-left">现居地</div>    
                    <div class="item-right">广东省佛山市南海区大沥镇五一村3号</div>
                </div>
                <div class="item">
                    <div class="item-left">居民来源</div>    
                    <div class="item-right">医生建档</div>
                </div>
                <div class="item">
                    <div class="item-left">真实姓名</div>    
                    <div class="item-right">张三</div>
                </div>
                <div class="item">
                    <div class="item-left">标签</div>    
                    <div class="item-right tag-list">
                        <div class="tag">发育不良</div>
                        <div class="tag">贫血</div>
                        <div class="tag">高血脂</div>
                    </div>
                </div>
            </div>

            <div style="margin-top:1vh">
                <div class="title">家庭成员</div>
                <div class="family-container">
                    <div class="family-item">
                        <van-image round width="3rem" height="3rem" 
                src="/static/img/girl.png" class="img" />
                        <div class="family-item-right">
                            <div class="family-top">
                                <div class="name">姓名</div> 
                                <div class="age">15岁</div> 
                                <div></div>
                            </div>
                            <div>母亲</div>
                        </div>
                    </div>
                    <div class="family-item">
                        <van-image round width="3rem" height="3rem" 
                src="/static/img/girl.png" class="img" />
                        <div class="family-item-right">
                            <div class="family-top">
                                <div class="name">姓名</div> 
                                <div class="age">15岁</div> 
                                <div></div>
                            </div>
                            <div>母亲</div>
                        </div>
                    </div>
                </div>
            </div>
           
<div class="flex-center">
    <div class="add-btn" @click="saveItem">添加服务</div>
</div>

</div>

<!-- 分类 -->
<van-popup v-model:show="isShowBirthday" :style="{ height: '80vh',width:'90vw' }">
    <van-date-picker @confirm="setDate" v-model="currentDate" :min-date="minDate" :max-date="maxDate" required
        title="生日" />
</van-popup>
</div>
</template>
<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getItem, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        const currentDate = ref(['2021', '01', '01']);

        const item = reactive({
            name: "",
            idcard: "",
            sex: 1,
            birthday: [],
            tel: "",
            address: "",
            tags: "",
            family: "",
            qianyue: true
        })

        const isShowBirthday = ref(false)
        const toggleBirthday = () => {
            isShowBirthday.value = !isShowBirthday.value
        }

        const setDate = e => {
            item.birthday = currentDate.value.join("-")
            isShowBirthday.value = !isShowBirthday.value
        }

        const saveItem = () => {
            router.push('/FuWuCreate')
        }
        return {
            item,
            isShowBirthday,
            toggleBirthday,
            setDate,
            currentDate,
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(),
            saveItem
        }
    }
}
</script>
<style scoped>
.top-bg {
    background: #49B9AD;
    width: 100vw;
    height: 25vh;
}

.top {
    position: absolute;
    top: 5vh;
    background: #FFFFFF;
    width: 90vw;
    margin: 0 5vw;
    height: 22vh;
    border-radius: 25px 25px 0 0;
    text-align: center;
}

.top-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.top-name {
    margin: 8px 0;
}

.qy {
    width: fit-content;
    border: 1px solid #49B9AD;
    background: #EAFEFA;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 13px;
}

.top-btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
    color: #1C2023;
    font-weight: 250;
}

.add-btn {
    background: #49B9AD;
    color: #FFFFFF;
    border-radius: 4px;
    width: 90vw;
    text-align: center;
    padding: 12px 8px;
    margin-top: 2vh;
}

.title {
    padding: 15px;
    font-size: 14px;
    color: #1C2023;
    font-weight: 250;
}

.item {
    padding: 15px;
    background: #FFFFFF;
    border-bottom: 1px solid #E3E4E5;

    display: flex;
    flex-direction: row;
    align-items: center;

    font-size: 16px;
    color: #1C2023;
    font-weight: 250;
}

.item-left {
    width: 26vw;
}

.tag-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.tag {
    border: 1px solid #49B9AD;
    background: #EAFEFA;
    border-radius: 10px;
    padding: 2px 8px;
    margin-right: 10px;
    font-size: 13px;
}

.family-container{
    background: #FFFFFF;
    padding: 15px;

    display: flex;
    flex-direction: row;
}
.family-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #F5F7FB;
    width: fit-content;
    padding: 8px 15px;
    margin-right: 15px;
}
.img{
    margin-right: 10px;
}
.family-top {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.name {
    font-size: 17px;
    margin-right: 10px;
    color: #1C2023;
    font-weight: 250;
}

.age {
    font-size: 14px;

}
</style>